<template>
    <el-form-item  :prop="name" :required="required" class="tx-form-input">
        <label slot="label" v-html="label"></label>
        <el-input v-model.trim="entity[name]"  :placeholder="placeholder"  v-if="isModify" :readonly="readonly"></el-input> 
        <div v-if="!isModify">{{entity[name]}}</div>
    </el-form-item> 
</template>

<script>
export default {
  props: {
    entity: {
      type: Object,
      default: () => {
        return {};
      }
    },
    name: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: ""
    },
    required: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    action: {
      type: String,
      default: "view"
    }
  },
  data() {
    return {};
  },
  computed:{
    isModify(){ 
        return this.action=="modify"
    }
  }
};
</script>


<style lang="scss">
.tx-form-input {
 
    
  .el-input__inner { 
    font-size: 14px;
  }
}
</style>


